@import './theme';
@import './mixin';
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

html {
    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Source Han Sans SC, WenQuanYi Micro Hei, sans-serif;
    height: 100%;
}

li {
    list-style: none;
}

// color & background-color
@each $name,
$color in (black: $black, white: $white,theme: $theme, domi: $domi, white-slow: $white-slow, basic: $basic, second: $second, main: $main, success: $success, warning: $warning, danger: $danger, error: $error, active: $active) {
    .color-#{ '' + $name } {
        color: $color;
    }
    .back-color-#{ '' + $name } {
        background-color: $color;
    }
}

// 字体
@for $i from 12 through 50 {
    .fz-#{$i} {
        font-size: $i + px;
    }
}

// ---- 边距 ----
@for $i from 1 through 100 {
    .mt-#{$i * 10} {
        margin-top: $i * 10px;
    }
    .mr-#{$i * 10} {
        margin-right: $i * 10px;
    }
    .mb-#{$i * 10} {
        margin-bottom: $i * 10px;
    }
    .ml-#{$i * 10} {
        margin-left: $i * 10px;
    }
    .mg-#{$i * 10} {
        margin: $i * 10px;
    }
    .pt-#{$i * 10} {
        padding-top: $i * 10px;
    }
    .pr-#{$i * 10} {
        padding-right: $i * 10px;
    }
    .pb-#{$i * 10} {
        padding-bottom: $i * 10px;
    }
    .pl-#{$i * 10} {
        padding-left: $i * 10px;
    }
    .pd-#{$i * 10} {
        padding: $i * 10px;
    }
}


/*  布局 */

// flex
.flex {
    display: flex;
}

.flex-warp {
    flex-wrap: wrap
}

.space-between {
    justify-content: space-between;
}

.flex-center {
    justify-content: center;
}

.flex-start {
    justify-content: flex-start;
}

.flex-end {
    justify-content: flex-end;
}

.flex-column-center {
    align-items: center;
}

.flex-column {
    flex-flow: column;
}

.flex-1 {
    flex: 1;
}


/* layout */

.bold {
    font-weight: bold;
}

.radius-4 {
    border-radius: 4px;
}

.radius-10 {
    border-radius: 10px;
}

.radius-20 {
    border-radius: 20px;
}

.relative {
    position: relative;
}

// 全屏居中
.left-top-center {
    @include left-top-center;
}

// 主题色外发光
.theme-shadow {
    box-shadow: 0 0 4px 4px $main;
}

.box-shadow {
    box-shadow: 0px 2px 6px 0px rgba(216, 216, 216, 0.47);
}

.postie {
    position: fixed;
    bottom: 40px;
    left: 0;
}

.text-center {
    text-align: center;
}

.border-bottom {
    border-bottom: 1px solid $border;
}

//侧边栏
.el-menu .el-menu-item{
padding-left: 20px !important;
}
.el-submenu__title{
    padding-left: 20px !important;
}
.el-menu-item-group__title{
    padding: 0 !important;
}
.el-menu--collapse .el-icon-arrow-right{
display: none !important;
}
/* 超出隐藏 */

// 单行省略
.text-hidden {
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

// 两行省略
.text-hidden-2 {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.cursor{
    cursor: pointer;
}
.text-center {
    text-align: center;
}

.border {
    border: 1px solid $main;
}

// 按钮默认样式
button {
    display: inline-block;
    border-radius: 4px;
    outline: 0;
    box-sizing: content-box;
    border: 1px solid $main;
    padding: 10px 25px;
    letter-spacing: 1px;
    cursor: pointer;
    color: $main;
    &[type="primary"] {
        color: $white;
    }
    &::before,
    &::after {
        border: 0;
        outline: 0;
    }
    // 点击反馈
    &:active {
        filter: brightness(0.8);
        transform: scale(.95);
    }
}

// mask 遮罩
.mask {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    z-index: 9;
}
// 交互反馈
.pointer {
    cursor: pointer;
     :active {
        filter: brightness(.8);
    }
}
//添加表格
.add-content{
    width: 74%;
    margin: 0 auto;
}

.desc-content{
    width: 90%;
    margin: 0 auto;
}
.desc{
    width: 85%;
    margin: 0 auto;
}
//工单数量
.isMore{
    color:  #261CDC;
    cursor: pointer;
}
.el-drawer__body{
    padding: 20px;
}
.el-drawer{
    overflow-y: auto;
  }